<!DOCTYPE html>
<html lang="en-us">
  <head>
    <meta charset="UTF-8">
    <title>Sharer.js by ellisonleao</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" href="stylesheets/normalize.css" media="screen">
    <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,700' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" type="text/css" href="stylesheets/stylesheet.css" media="screen">
    <link rel="stylesheet" type="text/css" href="stylesheets/prism.css" media="screen">

    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="Create social share elements on DOM objects">
    <link rel="stylesheet" type="text/css" href="stylesheets/normalize.css" media="screen">
    <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,700' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" type="text/css" href="stylesheets/stylesheet.css" media="screen">
    <link rel="stylesheet" type="text/css" href="stylesheets/custom.css" media="screen">
    <link rel="canonical" href="https://github.com/ellisonleao/sharer.js/">

    <meta property="og:url" content="https://ellisonleao.github.io/sharer.js/">
    <meta property="og:site_name" content="Share.js">
    <meta property="og:image" content="https://ellisonleao.github.io/sharer.js/img/socialbg.png">
    <meta property="og:image:type" content="image/png">
    <meta property="og:image:width" content="1291">
    <meta property="og:image:height" content="315">

    <meta property="twitter:creator" content="ellisonleao">
    <meta property="twitter:card" content="summary_large_image">
    <meta property="twitter:title" content="Sharer.js">
    <meta property="twitter:description" content="Create social share elements on DOM objects">
    <meta property="twitter:image:src" content="https://ellisonleao.github.io/sharer.js/img/socialbg.png">
    <meta property="twitter:image:width" content="1291">
    <meta property="twitter:image:height" content="315">
    <meta name="msapplication-TileColor" content="#2A5977">
    <meta name="theme-color" content="#2A5977">
  </head>
  <body>
    <section class="page-header">
      <h1 class="project-name">Sharer.js</h1>
      <h2 class="project-tagline">Create custom social share elements on DOM objects</h2>
      <a href="https://github.com/ellisonleao/sharer.js" class="btn">View on GitHub</a>
      <p></p>
      <iframe src="https://ghbtns.com/github-btn.html?user=ellisonleao&repo=sharer.js&type=star&count=true&size=large" frameborder="0" scrolling="0" width="160px" height="30px"></iframe>
      <iframe src="https://ghbtns.com/github-btn.html?user=ellisonleao&type=follow&count=true&size=large" frameborder="0" scrolling="0" width="220px" height="30px"></iframe>
    </section>

    <section class="main-content">
      <p>
      <strong>Sharer.js</strong> is a lightweight js lib to create custom social share components on DOM elements for your website. No dependencies.
      </p>

      <h1>
        <a id="installing" class="anchor" href="#installing" ></a>
        Installing:
      </h1>

      <h2>
        <a class="anchor" href="#using-npm" ></a>
        Using NPM
      </h2>
      <pre>npm install sharer.js</pre>
      <h2>
        <a id="min-version" class="anchor" href="#min-version" ></a>
        Grabbing the latest min version and adding to your page
      </h2>
      <pre><code class="language-markup">&lt;script src="path/to/sharer.min.js"&gt;&lt;/script&gt;</code></pre>
      <p>Or you can use a CDN</p>
      <pre><code class="language-markup">&lt;script src="https://cdn.jsdelivr.net/npm/sharer.js@0.5.2/sharer.min.js"&gt;&lt;/script&gt;</code></pre>

      <h1>
        <a id="adding-share-behaviour-to-a-component" class="anchor" href="#adding-share-behaviour-to-a-component" ></a>Adding share behaviour to a component
      </h1>

      <h2>
        <a id="available-sharer-components" class="anchor" href="#available-sharer-components" ></a>Sharer.js currently supports more than <strong>20</strong> social media sites:
      </h2>

      <ul>
        <li><a href="#twitter">Twitter/X</a></li>
        <li><a href="#bluesky">Bluesky</a></li>
        <li><a href="#threads">Threads</a></li>
        <li><a href="#facebook">Facebook</a></li>
        <li><a href="#linkedin">Linkedin</a></li>
        <li><a href="#email">Email</a></li>
        <li><a href="#whatsapp">Whatsapp</a></li>
        <li><a href="#telegram">Telegram</a></li>
        <li><a href="#viber">Viber</a></li>
        <li><a href="#pinterest">Pinterest</a></li>
        <li><a href="#tumblr">Tumblr</a></li>
        <li><a href="#hackernews">Hackernews</a></li>
        <li><a href="#reddit">Reddit</a></li>
        <li><a href="#vk">VK.com</a></li>
        <li><a href="#buffer">Buffer</a></li>
        <li><a href="#xing">Xing</a></li>
        <li><a href="#line">Line</a></li>
        <li><a href="#instapaper">Instapaper</a></li>
        <li><a href="#pocket">Pocket</a></li>
        <li><a href="#flipboard">Flipboard</a></li>
        <li><a href="#weibo">Weibo</a></li>
        <li><a href="#blogger">Blogger</a></li>
        <li><a href="#baidu">Baidu</a></li>
        <li><a href="#okru">Ok.ru</a></li>
        <li><a href="#evernote">Evernote</a></li>
        <li><a href="#skype">Skype</a></li>
        <li><a href="#trello">Trello</a></li>
        <li><a href="#diaspora">Diaspora</a></li>
      </ul>
      <br/>
      <br/>

      <p>Each sharer component has its own <pre>data-*</pre> attributes. Checkout specific elements below based on each social media site.</p>
      <p>All sharer objects can accept the following attributes:</p> 
      <ul>
        <li><strong>data-title</strong> - sharer text</li>
        <li><strong>data-url</strong> - url to be shared</li>
        <li><strong>data-width</strong> - popup width</li>
        <li><strong>data-height</strong> - popup height</li>
        <li><strong>data-link</strong> - share element will work as a link</li>
        <li><strong>data-blank (requires data-link combined)</strong> - share element will work as a link in a new tab</li>
      </ul>
      <h1>Manual event binding</h1>
      <p>Manual event binding is now supported from versions 0.3.1 and above through the <code>window.Sharer</code> object.</p>
      <p>You can now dynamically bind share events using the sharer.js library. Example using jQuery:</p>
      <pre>
                <code class="language-javascript">
$(elem).on('click', function() {
    // add new buttons with share behaviour
    $('#someDiv').append('&lt;button class="twitter" data-title="Some button" data-url="somesite.com">&lt;/button>');
    window.Sharer.init();
})
                </code>
      </pre>


      <h1>Share components</h1>
      <br/>

      <div class="component">
        <h2>
          <a id="twitter" class="anchor" href="#twitter" ></a>Twitter/X:
        </h2>

        <p>Available custom attributes:</p>

        <ul>
          <li><code>data-via</code> (optional: twitter username without @)</li>
          <li><code>data-hashtags</code> (optional: comma separated hashtags)</li>
        </ul>
        <pre><code class="language-markup">&lt;button class="button" data-sharer="twitter" data-title="Checkout Sharer.js!" data-hashtags="awesome, sharer.js" data-url="https://ellisonleao.github.io/sharer.js/"&gt;Share on Twitter&lt;/button&gt;</code></pre>
        <pre><code class="language-markup">&lt;button class="button" data-sharer="x" data-title="Checkout Sharer.js!" data-hashtags="awesome, sharer.js" data-url="https://ellisonleao.github.io/sharer.js/"&gt;Share on Twitter&lt;/button&gt;</code></pre>

        <p>Example:</p>

        <button class="button" data-sharer="twitter" data-title="Checkout Sharer.js!" data-hashtags="awesome, sharer.js" data-url="https://ellisonleao.github.io/sharer.js/" >Share on Twitter/X</button>
      </div>

      <div class="component">
        <h2>
          <a id="bluesky" class="anchor" href="#bluesky" ></a>Bluesky:
        </h2>

        <pre><code class="language-markup">&lt;button class="button" data-sharer="bluesky" data-title="Checkout Sharer.js!" data-url="https://ellisonleao.github.io/sharer.js/"&gt;Share on Bluesky&lt;/button&gt;</code></pre>

        <p>Example:</p>

        <button class="button" data-sharer="bluesky" data-title="Checkout Sharer.js!" data-url="https://ellisonleao.github.io/sharer.js/">Share on Bluesky</button>
      </div>

      <div class="component">
        <h2>
          <a id="threads" class="anchor" href="#threads" ></a>Threads:
        </h2>

        <pre><code class="language-markup">&lt;button class="button" data-sharer="threads" data-title="Checkout Sharer.js!" data-url="https://ellisonleao.github.io/sharer.js/"&gt;Share on Threads&lt;/button&gt;</code></pre>

        <p>Example:</p>

        <button class="button" data-sharer="threads" data-title="Checkout Sharer.js!" data-url="https://ellisonleao.github.io/sharer.js/" data-hashtags="test,test2">Share on Threads</button>
      </div>


      <div class="component">
        <h2>
          <a id="facebook" class="anchor" href="#facebook" ></a>Facebook:
        </h2>

        <p>Available custom attributes:</p>

        <ul>
          <li><code>data-hashtag</code> (optional: Single hashtag without #)</li>
        </ul>
        <pre><code class="language-markup">&lt;button class="button" data-sharer="facebook" data-hashtag="hashtag" data-url="https://ellisonleao.github.io/sharer.js/"&gt;Share on Facebook&lt;/button&gt;</code></pre>

        <p>Example:</p>

        <button class="button" data-quote="Checkout Sharer.js!" data-sharer="facebook" data-url="https://ellisonleao.github.io/sharer.js/" data-hashtag="sharerjs">Share on Facebook</button>
      </div>


      <div class="component">
        <h2>
          <a id="linkedin" class="anchor" href="#linkedin" ></a>Linkedin:
        </h2>

        <pre><code class="language-markup">&lt;button class="button" data-sharer="linkedin" data-url="https://ellisonleao.github.io/sharer.js/"&gt;Share on Linkedin&lt;/button&gt;</code></pre>

        <p>Example:</p>

        <button class="button" data-sharer="linkedin" data-url="https://ellisonleao.github.io/sharer.js/">Share on Linkedin</button>
      </div>


      <div class="component">
        <h2>
          <a id="email" class="anchor" href="#email" ></a>Email
        </h2>

        <p>Available custom attributes:</p>

        <ul>
          <li><code>data-to</code></li>
          <li><code>data-subject</code></li>
        </ul>

        <pre><code class="language-markup">&lt;button class="button" data-sharer="email" data-title="Awesome Url" data-url="https://ellisonleao.github.io/sharer.js/" data-subject="Hey! Check out that URL" data-to="some@email.com"&gt;Share via Email&lt;/button&gt;</code></pre>


        <p>Example:</p>

        <button class="button" data-sharer="email" data-title="Awesome Url" data-url="https://ellisonleao.github.io/sharer.js/" data-subject="Hey! Check out that URL" data-to="some@email.com">Share via Email</button>
      </div>


      <div class="component">
        <h2>
          <a id="whatsapp" class="anchor" href="#whatsapp" ></a>WhatsApp
        </h2>

        <pre><code class="language-markup">&lt;button class="button" data-sharer="whatsapp" data-title="Checkout Sharer.js!" data-url="https://ellisonleao.github.io/sharer.js/"&gt;Share on Whatsapp&lt;/button&gt;</code></pre>

        <p>Available custom attributes:</p>

        <ul>
          <li><code>data-to</code> (Phone number 9999999999 format)</li>
          <li><code>data-web</code> (send to whatsapp web instead of desktop/mobile version)</li>
          <li><code>data-description</code> (optional)</li>
        </ul>
        <p>Example:</p>

        <button class="button" data-sharer="whatsapp" data-web=true data-link=true data-blank=true data-title="Checkout Sharer.js!" data-url="https://ellisonleao.github.io/sharer.js/">Share on Whatsapp Web</button>
        <br/>
        <button class="button" data-sharer="whatsapp" data-link=true data-blank=true data-title="Checkout Sharer.js!" data-url="https://ellisonleao.github.io/sharer.js/">Share on Whatsapp</button>

      </div>

      <div class="component">
        <h2>
          <a id="telegram" class="anchor" href="#telegram" ></a>Telegram</h2>

        <pre><code class="language-markup">&lt;button class="button" data-sharer="telegram" data-title="Checkout Sharer.js!" data-url="https://ellisonleao.github.io/sharer.js/" &gt;Share on Telegram&lt;/button&gt;</code></pre>

        <p>Example:</p>

        <button class="button" data-sharer="telegram" data-title="Checkout Sharer.js!"
            data-url="https://ellisonleao.github.io/sharer.js/">Share on Telegram</button>
      </div>

      <div class="component">
        <h2>
          <a id="viber" class="anchor" href="#viber" ></a>Viber</h2>

        <pre><code class="language-markup">&lt;button class="button" data-sharer="viber" data-title="Checkout Sharer.js!" data-url="https://ellisonleao.github.io/sharer.js/"&gt;Share on Viber&lt;/button&gt;</code></pre>

        <p>Example:</p>

        <button class="button" data-sharer="viber" data-title="Checkout Sharer.js!" data-url="https://ellisonleao.github.io/sharer.js/">Share on Viber</button>
      </div>

      <div class="component">
        <h2>
          <a id="pinterest" class="anchor" href="#pinterest" ></a>Pinterest
        </h2>

        <p>Available custom attributes:</p>

        <ul>
          <li><code>data-image</code> (optional: absolute image url)</li>
          <li><code>data-description</code> (optional)</li>
        </ul>

        <pre><code class="language-markup">&lt;button class="button" data-sharer="pinterest" data-url="https://ellisonleao.github.io/sharer.js/"&gt;Share on Pinterest&lt;/button&gt;</code></pre>

        <p>Example:</p>

        <button class="button" data-sharer="pinterest" data-url="https://ellisonleao.github.io/sharer.js/">Share on Pinterest</button>
      </div>


      <div class="component">
        <h2>
          <a id="tumblr" class="anchor" href="#tumblr" ></a>Tumblr
        </h2>

        <p>Available custom attributes:</p>

        <ul>
          <li><code>data-caption</code> (optional)</li>
          <li><code>data-tags</code> (optional: comma separated tags)</li>
        </ul>

        <p>Example:</p>

        <pre><code class="language-markup">&lt;button class="button" data-sharer="tumblr" data-caption="Sharer.js is the ultimate sharer js lib" data-title="Checkout Sharer.js!" data-tags="social,share,testing" data-url="https://ellisonleao.github.io/sharer.js/"&gt;Share on Tumblr&lt;/button&gt;</code></pre>
        <button class="button" data-sharer="tumblr" data-caption="Sharer.js is the ultimate sharer js lib" data-title="Checkout Sharer.js!" data-tags="social,share,testing" data-url="https://ellisonleao.github.io/sharer.js/">Share on Tumblr</button>
      </div>

      <div class="component">
        <h2>
          <a id="hackernews" class="anchor" href="#hackernews" ></a>Hackernews
        </h2>

        <p>Available custom attributes:</p>

        <ul>
          <li><code>data-url</code></li>
          <li><code>data-title</code></li>
        </ul>

        <pre><code class="language-markup">&lt;button class="button" data-sharer="hackernews" data-title="Checkout Sharer.js!" data-url="https://ellisonleao.github.io/sharer.js/"&gt;Share on Hackernews&lt;/button&gt;</code></pre>

        <p>Example:</p>

        <button class="button" data-sharer="hackernews"  data-title="Checkout Sharer.js!" data-url="https://ellisonleao.github.io/sharer.js/">Share on Hackernews</button>
      </div>

      <div class="component">
        <h2>
          <a id="reddit" class="anchor" href="#reddit" ></a>Reddit
        </h2>

        <pre><code class="language-markup">&lt;button class="button" data-sharer="reddit" data-url="https://ellisonleao.github.io/sharer.js/"&gt;Share on Reddit&lt;/button&gt;</code></pre>

        <p>Example:</p>

        <button class="button" data-sharer="reddit" data-title="Checkout Sharer.js!" data-url="https://ellisonleao.github.io/sharer.js/">Share on Reddit</button>
      </div>

      <div class="component">
        <h2>
          <a id="vk" class="anchor" href="#vk" ></a>VK
        </h2>

        <p>Available custom attributes:</p>

        <ul>
          <li><code>data-image</code> Absolute url for the share image (optional)</li>
          <li><code>data-caption</code> (optional)</li>
        </ul>

        <pre><code class="language-markup">&lt;button class="button" data-sharer="vk" data-caption="Sharer.js is the ultimate sharer js lib" data-title="Checkout Sharer.js!" data-url="https://ellisonleao.github.io/sharer.js/"&gt;Share on VK&lt;/button&gt;</code></pre>

        <p>Example:</p>

        <button class="button" data-sharer="vk" data-caption="Sharer.js is the ultimate sharer js lib" data-title="Checkout Sharer.js!" data-url="https://ellisonleao.github.io/sharer.js/">Share on VK</button>
      </div>

      <div class="component">
        <h2>
          <a id="buffer" class="anchor" href="#buffer" ></a>Buffer
        </h2>

        <p>Available custom attributes:</p>

        <ul>
          <li><code>data-via</code> (twitter username)</li>
          <li><code>data-picture</code> (If picture url is set, the link meta be replaced)</li>
        </ul>

        <pre><code class="language-markup">&lt;button class="button" data-sharer="buffer" data-via="ellisonleao" data-picture="https://ellisonleao.github.io/sharer.js/img/socialbg.png" data-title="Sharer.js is the ultimate sharer js lib" data-url="https://ellisonleao.github.io/sharer.js/"&gt;Share on Buffer&lt;/button&gt;</code></pre>

        <p>Example:</p>

        <button class="button" data-sharer="buffer" data-title="Sharer.js is the ultimate sharer js lib" data-via="ellisonleao" data-picture="https://ellisonleao.github.io/sharer.js/img/socialbg.png" data-url="https://ellisonleao.github.io/sharer.js/">Share on Buffer</button>
      </div>

      <div class="component">
        <h2>
          <a id="xing" class="anchor" href="#xing" ></a>Xing
        </h2>

        <pre><code class="language-markup">&lt;button class="button" data-sharer="xing" data-title="Sharer.js is the ultimate sharer js lib" data-url="https://ellisonleao.github.io/sharer.js/"&gt;Share on Xing&lt;/button&gt;</code></pre>

        <p>Example:</p>

        <button class="button" data-sharer="xing" data-title="Sharer.js is the ultimate sharer js lib" data-url="https://ellisonleao.github.io/sharer.js/">Share on Xing</button>
      </div>

      <div class="component">
        <h2>
          <a id="line" class="anchor" href="#line" ></a>Line
        </h2>

        <pre><code class="language-markup">&lt;button class="button" data-sharer="line" data-title="Sharer.js is the ultimate sharer js lib" data-url="https://ellisonleao.github.io/sharer.js/"&gt;Share on Line&lt;/button&gt;</code></pre>

        <p>Example:</p>

        <button class="button" data-sharer="line" data-title="Sharer.js is the ultimate sharer js lib" data-url="https://ellisonleao.github.io/sharer.js/">Share on Line</button>
      </div>

      <div class="component">
        <h2>
          <a id="instapaper" class="anchor" href="#line" ></a>Instapaper
        </h2>

        <p>Available custom attributes:</p>

        <ul>
          <li><code>data-description</code></li>
        </ul>

        <pre><code class="language-markup">&lt;button class="button" data-sharer="instapaper" data-title="Checkout Sharer.js!" data-description="Awesome lib!" data-url="https://ellisonleao.github.io/sharer.js/"&gt;Share on Instapaper&lt;/button&gt;</code></pre>

        <p>Example:</p>

        <button class="button" data-sharer="instapaper" data-url="https://ellisonleao.github.io/sharer.js/" data-title="Checkout Sharer.js!" data-description="Awesome lib!">Share on Instapaper</button>
      </div>


      <div class="component">
        <h2>
          <a id="pocket" class="anchor" href="#pocket" ></a>Pocket
        </h2>

        <pre><code class="language-markup">&lt;button class="button" data-sharer="pocket" data-title="Checkout Sharer.js!" data-url="https://ellisonleao.github.io/sharer.js/"&gt;Share on Pocket&lt;/button&gt;</code></pre>

        <p>Example:</p>

        <button class="button" data-sharer="pocket" data-url="https://ellisonleao.github.io/sharer.js/">Share on Pocket</button>
      </div>

      <div class="component">
        <h2>
          <a id="flipboard" class="anchor" href="#flipboard" ></a>Flipboard
        </h2>

        <pre><code class="language-markup">&lt;button class="button" data-sharer="flipboard" data-title="Checkout Sharer.js!" data-url="https://ellisonleao.github.io/sharer.js/"&gt;Share on Flipboard&lt;/button&gt;</code></pre>

        <p>Example:</p>

        <button class="button" data-sharer="flipboard" data-title="Checkout Sharer.js!" data-url="https://ellisonleao.github.io/sharer.js/">Share on Flipboard</button>
      </div>

      <div class="component">
        <h2>
          <a id="weibo" class="anchor" href="#weibo" ></a>Weibo
        </h2>

        <p>Available custom attributes:</p>

        <ul>
          <li><code>data-image</code> Absolute url for share image (optional)</li>
          <li><code>data-appkey</code> (optional)</li>
          <li><code>data-ralateuid</code>(optional)</li>
        </ul>

        <pre><code class="language-markup">&lt;button class="button" data-sharer="weibo" data-title="Checkout Sharer.js!" data-url="https://ellisonleao.github.io/sharer.js/"&gt;Share on Weibo&lt;/button&gt;</code></pre>

        <p>Example:</p>

        <button class="button" data-sharer="weibo" data-url="https://ellisonleao.github.io/sharer.js/" data-title="Checkout Sharer.js!">Share on weibo</button>
      </div>

      <div class="component">
        <h2>
          <a id="blogger" class="anchor" href="#blogger" ></a>Blogger
        </h2>

        <p>Available custom attributes:</p>

        <ul>
          <li><code>data-description</code></li>
        </ul>

        <pre><code class="language-markup">&lt;button class="button" data-sharer="blogger" data-url="https://ellisonleao.github.io/sharer.js/" data-description="Awesome lib!"&gt;Share on blogger&lt;/button&gt;</code></pre>

        <p>Example:</p>

        <button class="button" data-sharer="blogger" data-url="https://ellisonleao.github.io/sharer.js/" data-title="Checkout Sharer.js!" data-description="Awesome lib!">Share on blogger</button>
      </div>

      <div class="component">
        <h2>
          <a id="baidu" class="anchor" href="#baidu" ></a>Baidu
        </h2>

        <pre><code class="language-markup">&lt;button class="button" data-sharer="baidu" data-url="https://ellisonleao.github.io/sharer.js/" data-title="Checkout Sharer.js!"&gt;Share on baidu&lt;/button&gt;</code></pre>

        <p>Example:</p>

        <button class="button" data-sharer="baidu" data-url="https://ellisonleao.github.io/sharer.js/" data-title="Checkout Sharer.js!">Share on Baidu</button>
      </div>

      <div class="component">
        <h2>
          <a id="okru" class="anchor" href="#okru" ></a>Ok.ru
        </h2>

        <pre><code class="language-markup">&lt;button class="button" data-sharer="okru" data-url="https://ellisonleao.github.io/sharer.js/" data-title="Checkout Sharer.js!"&gt;Share on Ok.ru&lt;/button&gt;</code></pre>

        <p>Example:</p>

        <button class="button" data-sharer="okru" data-url="https://ellisonleao.github.io/sharer.js/" data-title="Checkout Sharer.js!">Share on Ok.ru</button>
      </div>

      <div class="component">
        <h2>
          <a id="evernote" class="anchor" href="#evernote" ></a>Evernote
        </h2>

        <pre><code class="language-markup">&lt;button class="button" data-sharer="evernote" data-url="https://ellisonleao.github.io/sharer.js/" data-title="Checkout Sharer.js!"&gt;Share on Evernote&lt;/button&gt;</code></pre>

        <p>Example:</p>

        <button class="button" data-sharer="evernote" data-url="https://ellisonleao.github.io/sharer.js/" data-title="Checkout Sharer.js!">Share on Evernote</button>
      </div>

      <div class="component">
        <h2>
          <a id="skype" class="anchor" href="#skype" ></a>Skype
        </h2>

        <pre><code class="language-markup">&lt;button class="button" data-sharer="skype" data-url="https://ellisonleao.github.io/sharer.js/" data-title="Checkout Sharer.js!"&gt;Share on skype&lt;/button&gt;</code></pre>

        <p>Example:</p>

        <button class="button" data-sharer="skype" data-url="https://ellisonleao.github.io/sharer.js/" data-title="Checkout Sharer.js!">Share on skype</button>
      </div>

      <div class="component">
        <h2>
          <a id="trello" class="anchor" href="#trello" ></a>Trello
        </h2>

        <p>Available custom attributes:</p>

        <ul>
          <li><code>data-description</code> (optional)</li>
        </ul>

        <pre><code class="language-markup">&lt;button class="button" data-sharer="trello" data-url="https://ellisonleao.github.io/sharer.js/" data-title="Checkout Sharer.js!" data-description="Create social share elements on DOM objects"&gt;Share on Trello&lt;/button&gt;</code></pre>

        <p>Example:</p>

        <button class="button" data-sharer="trello" data-url="https://ellisonleao.github.io/sharer.js/" data-title="Checkout Sharer.js!" data-description="Create social share elements on DOM objects">Share on Trello</button>
      </div>

      <div class="component">
        <h2>
          <a id="diaspora" class="anchor" href="#diaspora" ></a>Diaspora
        </h2>

        <pre><code class="language-markup">&lt;button class="button" data-sharer="diaspora" data-url="https://ellisonleao.github.io/sharer.js/" data-title="Checkout Sharer.js!" data-description="Create social share elements on DOM objects"&gt;Share on Diaspora&lt;/button&gt;</code></pre>

        <p>Example:</p>

        <button class="button" data-sharer="diaspora" data-url="https://ellisonleao.github.io/sharer.js/" data-title="Checkout Sharer.js!" data-description="Create social share elements on DOM objects">Share on Diaspora</button>
      </div>


      <footer class="site-footer">
        <span class="site-footer-owner"><a href="https://github.com/ellisonleao/sharer.js">Sharer.js</a> is maintained by <a href="https://github.com/ellisonleao">ellisonleao</a>.</span>
        <p class="back-to-top"> <a href="#available-sharer-components">Back to top</a> </p>
      </footer>

    </section>
    <script src="https://cdn.jsdelivr.net/npm/sharer.js@0.5.2/sharer.min.js"></script>
    <script src="js/prism.js"></script>
    <script>
      (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
              (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
                m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
            })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

      ga('create', 'UA-899823-16', 'auto');
      ga('send', 'pageview');

      (function(a,b,c,d,e){function f(){var a=b.createElement("script");a.async=!0;
              a.src="//radar.cedexis.com/1/11475/radar.js";b.body.appendChild(a)}/\bMSIE 6/i
                .test(a.navigator.userAgent)||(a[c]?a[c](e,f,!1):a[d]&&a[d]("on"+e,f))})
      (window,document,"addEventListener","attachEvent","load");
    </script>
  </body>
</html>
